<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>点点的相册</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-image: linear-gradient(to right, #f0b5cf 0%, #b7b5ff 100%);
      }
      .albumbox {
        background-color: rgb(191, 190, 245);
        width: 900px;
        height: 450px;
        margin: 0 auto;
        margin-top: 60px;
        overflow: hidden;
        border-radius: 20px;
        box-shadow: 0px 0px 50px rgb(15, 15, 15);
      }
      .albumbox h3 {
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: rgb(0, 0, 0);
      }
      ul,
      li {
        list-style: none;
      }
      .albumbox .showpage {
        width: 750px;
        height: 400px;
        overflow: hidden;
        float: left;
      }
      .showpage > li > img {
        display: block;
        width: 750px;
        height: 400px;
        object-fit: contain;
      }
      .btn {
        width: 150px;
        height: 400px;
        float: right;
        overflow: auto;
      }
      ::-webkit-scrollbar {
        display: none;
      }
      .btn > li > a > img {
        width: 150px;
        height: 80px;
        display: block;
        border-top: 2px solid grey;
        object-fit: cover;
      }
      .btn li a img:hover {
        transform: scale(1.2);
        transition: all 0.2;
      }
    </style>
  </head>
  <body>
    <div class="albumbox">
      <h3>点点的相册</h3>
      <ul class="showpage">
        <li><img id="pic01" src="images\images-01.jpg" /></li>
        <li><img id="pic02" src="images\images-02.jpg" /></li>
        <li><img id="pic03" src="https://gitee.com/dayuqianqian/fish-pond/raw/master/images/images-03.JPG" /></li>
        <li><img id="pic04" src="images\images-04.jpg" /></li>
        <li><img id="pic05" src="images\images-05.jpg" /></li>
        <li><img id="pic06" src="images\images-06.jpg" /></li>
        <li><img id="pic07" src="images\images-07.jpg" /></li>
        <li><img id="pic08" src="images\images-08.jpg" /></li>
        <li><img id="pic09" src="images\images-09.jpg" /></li>
        <li><img id="pic10" src="images\images-10.jpg" /></li>
        <li><img id="pic11" src="images\images-11.jpg" /></li>
        <li><img id="pic12" src="images\images-12.jpg" /></li>
        <li><img id="pic13" src="images\images-13.jpg" /></li>
        <li><img id="pic14" src="images\images-14.jpg" /></li>
        <li><img id="pic15" src="images\images-15.jpg" /></li>
        <li><img id="pic16" src="images\images-16.jpg" /></li>
        <li><img id="pic17" src="images\images-17.jpg" /></li>
        <li><img id="pic18" src="images\images-18.jpg" /></li>
        <li><img id="pic19" src="images\images-19.jpg" /></li>
        <li><img id="pic20" src="images\images-20.jpg" /></li>
        <li><img id="pic21" src="images\images-21.jpg" /></li>
        <li><img id="pic22" src="images\images-22.jpg" /></li>
        <li><img id="pic23" src="images\images-23.jpg" /></li>
        <li><img id="pic24" src="images\images-24.jpg" /></li>
        <li><img id="pic25" src="images\images-25.jpg" /></li>
        <li><img id="pic26" src="images\images-26.jpg" /></li>
        <li><img id="pic27" src="images\images-27.jpg" /></li>
        <li><img id="pic28" src="images\images-28.jpg" /></li>
        <li><img id="pic29" src="images\images-29.jpg" /></li>
        <li><img id="pic30" src="images\images-30.jpg" /></li>
        <li><img id="pic31" src="images\images-31.jpg" /></li>
        <li><img id="pic32" src="images\images-32.jpg" /></li>
        <li><img id="pic33" src="images\images-33.jpg" /></li>
        <li><img id="pic34" src="images\images-34.jpg" /></li>
        <li><img id="pic35" src="images\images-35.jpg" /></li>
        <li><img id="pic36" src="images\images-36.jpg" /></li>
        <li><img id="pic37" src="images\images-37.jpg" /></li>
        <li><img id="pic38" src="images\images-38.jpg" /></li>
        <li><img id="pic39" src="images\images-39.jpg" /></li>
        <li><img id="pic40" src="images\images-40.jpg" /></li>
        <li><img id="pic41" src="images\images-41.jpg" /></li>
        <li><img id="pic42" src="images\images-42.jpg" /></li>
        <li><img id="pic43" src="images\images-43.jpg" /></li>
        <li><img id="pic44" src="images\images-44.jpg" /></li>
        <li><img id="pic45" src="images\images-45.jpg" /></li>
        <li><img id="pic46" src="images\images-46.jpg" /></li>
        <li><img id="pic47" src="images\images-47.jpg" /></li>
        <li><img id="pic48" src="images\images-48.jpg" /></li>
        <li><img id="pic49" src="images\images-49.jpg" /></li>
      </ul>
      <ul class="btn">
        <li>
          <a href="#pic01"><img src="images\images-01.jpg" /></a>
        </li>
        <li>
          <a href="#pic02"><img src="images\images-02.jpg" /></a>
        </li>
        <li>
          <a href="#pic03"><img src="images\images-03.jpg" /></a>
        </li>
        <li>
          <a href="#pic04"><img src="images\images-04.jpg" /></a>
        </li>
        <li>
          <a href="#pic05"><img src="images\images-05.jpg" /></a>
        </li>
        <li>
          <a href="#pic06"><img src="images\images-06.jpg" /></a>
        </li>
        <li>
          <a href="#pic07"><img src="images\images-07.jpg" /></a>
        </li>
        <li>
          <a href="#pic08"><img src="images\images-08.jpg" /></a>
        </li>
        <li>
          <a href="#pic09"><img src="images\images-09.jpg" /></a>
        </li>
        <li>
          <a href="#pic10"><img src="images\images-10.jpg" /></a>
        </li>
        <li>
          <a href="#pic11"><img src="images\images-11.jpg" /></a>
        </li>
        <li>
          <a href="#pic12"><img src="images\images-12.jpg" /></a>
        </li>
        <li>
          <a href="#pic13"><img src="images\images-13.jpg" /></a>
        </li>
        <li>
          <a href="#pic14"><img src="images\images-14.jpg" /></a>
        </li>
        <li>
          <a href="#pic15"><img src="images\images-15.jpg" /></a>
        </li>
        <li>
          <a href="#pic16"><img src="images\images-16.jpg" /></a>
        </li>
        <li>
          <a href="#pic17"><img src="images\images-17.jpg" /></a>
        </li>
        <li>
          <a href="#pic18"><img src="images\images-18.jpg" /></a>
        </li>
        <li>
          <a href="#pic19"><img src="images\images-19.jpg" /></a>
        </li>
        <li>
          <a href="#pic20"><img src="images\images-20.jpg" /></a>
        </li>
        <li>
          <a href="#pic21"><img src="images\images-21.jpg" /></a>
        </li>
        <li>
          <a href="#pic22"><img src="images\images-22.jpg" /></a>
        </li>
        <li>
          <a href="#pic23"><img src="images\images-23.jpg" /></a>
        </li>
        <li>
          <a href="#pic24"><img src="images\images-24.jpg" /></a>
        </li>
        <li>
          <a href="#pic25"><img src="images\images-25.jpg" /></a>
        </li>
        <li>
          <a href="#pic26"><img src="images\images-26.jpg" /></a>
        </li>
        <li>
          <a href="#pic27"><img src="images\images-27.jpg" /></a>
        </li>
        <li>
          <a href="#pic28"><img src="images\images-28.jpg" /></a>
        </li>
        <li>
          <a href="#pic29"><img src="images\images-29.jpg" /></a>
        </li>
        <li>
          <a href="#pic30"><img src="images\images-30.jpg" /></a>
        </li>
        <li>
          <a href="#pic31"><img src="images\images-31.jpg" /></a>
        </li>
        <li>
          <a href="#pic32"><img src="images\images-32.jpg" /></a>
        </li>
        <li>
          <a href="#pic33"><img src="images\images-33.jpg" /></a>
        </li>
        <li>
          <a href="#pic34"><img src="images\images-34.jpg" /></a>
        </li>
        <li>
          <a href="#pic35"><img src="images\images-35.jpg" /></a>
        </li>
        <li>
          <a href="#pic36"><img src="images\images-36.jpg" /></a>
        </li>
        <li>
          <a href="#pic37"><img src="images\images-37.jpg" /></a>
        </li>
        <li>
          <a href="#pic38"><img src="images\images-38.jpg" /></a>
        </li>
        <li>
          <a href="#pic39"><img src="images\images-39.jpg" /></a>
        </li>
        <li>
          <a href="#pic40"><img src="images\images-40.jpg" /></a>
        </li>
        <li>
          <a href="#pic41"><img src="images\images-41.jpg" /></a>
        </li>
        <li>
          <a href="#pic42"><img src="images\images-42.jpg" /></a>
        </li>
        <li>
          <a href="#pic43"><img src="images\images-43.jpg" /></a>
        </li>
        <li>
          <a href="#pic44"><img src="images\images-44.jpg" /></a>
        </li>
        <li>
          <a href="#pic45"><img src="images\images-45.jpg" /></a>
        </li>
        <li>
          <a href="#pic46"><img src="images\images-46.jpg" /></a>
        </li>
        <li>
          <a href="#pic47"><img src="images\images-47.jpg" /></a>
        </li>
        <li>
          <a href="#pic48"><img src="images\images-48.jpg" /></a>
        </li>
        <li>
          <a href="#pic49"><img src="images\images-49.jpg" /></a>
        </li>
      </ul>
    </div>
  </body>
</html>
